<template>
    <div class="container">


        <el-card class="card-left">
            <div class="left-button">
                <el-text type="info" style="font-size: 20px;">班级列表</el-text>
            </div>
            <el-divider/>
            <el-input v-model="classSearch" @change="getUserClass(loginUserId)" style="width: 240px" placeholder="回车搜索" :prefix-icon="Search"/>
            <div class="left-main">
                
                <div style="margin-top: 10px;clear: both;cursor: pointer;" v-for="(item,index) in classInfo" :key="index" @click="chooseClass=item,init()">
                    <div style="float: left;"><el-avatar shape="square" size="large" :src="item?.classAvatar?(config.API_URL+'/'+item?.classAvatar):'https://img0.baidu.com/it/u=3922627524,101362068&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'" /></div>
                    <div style="margin-left: 70px;height: 50px;">
                        <el-text style="font-size: 18px;" line-clamp="1"><b>{{item.className}}</b></el-text>
                        <br>
                        <el-text v-if="item.newMessage && item.newMessage!=0">你有{{item.newMessage}}条新消息啦</el-text>
                    </div>
                </div>
            </div>

            <el-divider />
            <div style="text-align: center;margin-top: -10px;"><el-button type="primary" link @click="getAllClassList(),showSearchClass=true"><b style="font-size: 20px;">查找班级</b></el-button></div>
        </el-card>

        <el-card class="card-right" v-if="chooseClass">
            <div class="right-top">
                <div><el-text style="font-size: 18px;" line-clamp="1"><b>{{chooseClass?.className}}</b></el-text></div>
                <el-divider />
                <div ref="scrollRef" style="height: 400px; overflow-y: auto;">
                    <div style="margin-top: 30px" v-for="(item,index) in messageList" :key="index" >
                        <div v-if="item.userId!==loginUserId" style="clear: both;">
                            <div style="float: left;"><el-avatar shape="square" size="large" :src="item.avatar?(config.API_URL +'/'+item.avatar):'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F006WYq6ngy1hrnbjfvr1oj30u00u0q3p.jpg&thumburl=https%3A%2F%2Fimg0.baidu.com%2Fit%2Fu%3D870975181%2C849440641%26fm%3D253%26fmt%3Dauto%26app%3D120%26f%3DJPEG%3Fw%3D500%26h%3D500'" /></div>
                            <div style="margin-left: 68px;margin-top: -10px;">
                                <div><el-text style="font-size: 10px;">{{item.createTime.toLocaleString()}}</el-text></div>
                                <div style="margin-top: -5px;"><el-text>{{item.userName}}</el-text></div>
                                <div style="margin-top: -5px;"><el-text style="font-size: 30px;white-space: pre-wrap;">{{item.message}}</el-text></div>
                            </div>
                        </div>

                        <div v-else style="clear: both;margin-top: 30px;margin-left: 36%;">
                            <div style="float: right;"><el-avatar shape="square" size="large" :src="item.avatar?(config.API_URL +'/'+item.avatar):'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F006WYq6ngy1hrnbjfvr1oj30u00u0q3p.jpg&thumburl=https%3A%2F%2Fimg0.baidu.com%2Fit%2Fu%3D870975181%2C849440641%26fm%3D253%26fmt%3Dauto%26app%3D120%26f%3DJPEG%3Fw%3D500%26h%3D500'" /></div>
                            <div style="margin-right: 12%;">
                                <div style="text-align: right;"><el-text style="font-size: 10px;">{{item.createTime.toLocaleString()}}</el-text></div>
                                <div style="margin-top: -5px;text-align: right;"><el-text>{{item.userName}}</el-text></div>
                                <div style="margin-top: -5px;text-align: right;"><el-text style="font-size: 30px;white-space: pre-wrap;">{{item.message}}</el-text></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider />
            <div>
                <el-input v-on:keyup="handelKeyup" style="font-size: 21px;" v-model="input" rows="3" type="textarea" maxlength="200" show-word-limit></el-input>
                <el-button style="margin-left: 88%;" type="success" @click="async()=>{await sendMessage(userInfo.userName,userInfo.avatar),await nextTick(),scrollRef.scrollTop = scrollRef.scrollHeight}" plain>发送(Enter)</el-button>
            </div>
        </el-card>

        <el-card class="card-right" v-else>
            
        </el-card>
    </div>

    <el-dialog v-model="showSearchClass" style="width: 400px;height: 700px;margin-top: 30px;">
        <el-input v-model="allClassSearch" @change="getAllClassList()" placeholder="回车搜索" :prefix-icon="Search"/>
        <el-divider />
        <div>
            <div style="margin-top: 10px;clear: both;" v-for="(item,index) in allClassList" :key="index">
                <div style="float: left;"><el-avatar shape="square" size="large" :src="item?.classAvatar?(config.API_URL+'/'+item?.classAvatar):'https://img0.baidu.com/it/u=3922627524,101362068&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'" /></div>
                <div style="margin-left: 70px;">
                    <el-text style="font-size: 18px;" line-clamp="1"><b>{{item.className}}</b></el-text>
                </div>
                <div style="text-align: right;">
                    <el-button v-if="item.joined" type="danger">退出班级</el-button>
                    <el-button v-else type="primary">加入班级</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
    import useClass from '@/hooks/useClass';
    import useUser from '@/hooks/useUser';
    import { onMounted,inject,ref,onBeforeUnmount } from 'vue';
    import Config from '@/types/config';
    import { Search } from '@element-plus/icons-vue'
    import { nextTick } from 'vue';

    const config:Config = inject('$config');
    const loginUserId = localStorage.getItem("loginUserId");
    const {classInfo,classSearch,chooseClass,input,getMessageParm,messageList,scrollRef,allClassSearch,allClassList,
        getAllClassList,socketConnect,socketUnConnect,getMessage,sendMessage,getUserClass}=useClass()
    const {userInfo,getUserInfo}=useUser()
    const showSearchClass=ref<boolean>(false)
    
    async function handelKeyup(Event){
        if(Event.key === 'Enter' && !Event.shiftKey){
            await sendMessage(userInfo.value.userName,userInfo.value.avatar)
        }
    }


    onMounted(()=>{
        getUserClass(loginUserId)
        getUserInfo(loginUserId)
        socketConnect()
    })
    onBeforeUnmount(() => {
        socketUnConnect();
    });
    

    async function init(){
        classInfo.value.find(c=>c.id===chooseClass.value.id).newMessage=0
        await getMessage()
        await nextTick()
        scrollRef.value.scrollTop = scrollRef.value.scrollHeight
    }

    
    
</script>

<style scoped>
    .container{
        margin-top: 60px;
        margin-left: 100px;
        width: 1500px;
    }

    .card-left{
        float: left ;
        width: 300px;
        height: 680px;
        
    }

    .left-button{

        text-align: center;
    }


    .card-right{
        height: 680px;
        width: 1000px;

    }


    .left-main{
        height: 470px;
        overflow:auto
    }

    .right-top{
        height: 460px;
    }

    ::v-deep .el-textarea__inner {
        resize: none; /* 禁止拖动调整大小 */
        outline: none;
        box-shadow: none;
    }
</style>